<template>
	<view class="list-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" title="统计分析"></uni-navbar></view>

		<view class="tab-nav">
			<view class="tab-item" :class="tabIndex == 1 ? 'active' : ''" @click="tab(1)">性别分析</view>
			<view class="tab-item" :class="tabIndex == 2 ? 'active' : ''" @click="tab(2)">民族分析</view>
			<view class="tab-item" :class="tabIndex == 3 ? 'active' : ''" @click="tab(3)">年龄分析</view>
			<view class="tab-item" :class="tabIndex == 4 ? 'active' : ''" @click="tab(4)">学历分析</view>
			<view class="tab-item" :class="tabIndex == 5 ? 'active' : ''" @click="tab(5)">党派分析</view>
			<view class="tab-item" :class="tabIndex == 6 ? 'active' : ''" @click="tab(6)">代表团分析</view>
			<!-- <view class="tab-item" :class="tabIndex == 7 ? 'active' : ''" @click="tab(7)">地域活动组分析</view> -->
			<!-- <view class="tab-item" :class="tabIndex == 8 ? 'active' : ''" @click="tab(8)">界别分析</view> -->
			<!-- <view class="tab-item" :class="tabIndex == 9 ? 'active' : ''" @click="tab(9)">专委会分析</view> -->
		</view>

		<view class="table-box" v-if="tabIndex == 1">
			<view class="com-h2"><text class="h2-title">数量统计</text></view>

			<u-table class="table-inner" border-color="#F8F8F8" :key="tabIndex">
				<u-tr>
					<u-th width="150rpx">序号</u-th>
					<u-th width="400rpx">性别</u-th>
					<u-th>人数统计</u-th>
				</u-tr>
				<view class="table-cell" v-for="(item, index) of statisticsList" :key="index" @click="navTo(item)">
					<u-tr>
						<u-td width="150rpx">{{ index + 1 }}</u-td>
						<u-td width="400rpx">{{ item.NAME }}</u-td>
						<u-td>{{ item.VALUE }}</u-td>
					</u-tr>
				</view>
			</u-table>

			<view class="com-h2"><text class="h2-title">图表展示1</text></view>

			<view class="canvas-box">
				<!-- 饼状图 -->
				<uni-charts type="pie" canvasId="chartData" :chartData="chartData" :reshow="tabIndex == 1"></uni-charts>
			</view>
		</view>

		<view class="table-box" v-if="tabIndex == 2">
			<view class="com-h2"><text class="h2-title">数量统计</text></view>

			<u-table class="table-inner" border-color="#F8F8F8" :key="tabIndex">
				<u-tr>
					<u-th width="150rpx">序号</u-th>
					<u-th width="400rpx">民族</u-th>
					<u-th>人数统计</u-th>
				</u-tr>
				<view class="table-cell" v-for="(item, index) of statisticsList" :key="index" @click="navTo(item)">
					<u-tr>
						<u-td width="150rpx">{{ index + 1 }}</u-td>
						<u-td width="400rpx">{{ item.NAME }}</u-td>
						<u-td>{{ item.VALUE }}</u-td>
					</u-tr>
				</view>
			</u-table>

			<view class="com-h2"><text class="h2-title">图表展示</text></view>

			<view class="canvas-box">
				<!-- 饼状图 -->
				<uni-charts type="pie" canvasId="chartData" :chartData="chartData" :reshow="tabIndex == 2"></uni-charts>
			</view>
		</view>

		<view class="table-box" v-if="tabIndex == 3">
			<view class="com-h2"><text class="h2-title">数量统计</text></view>

			<u-table class="table-inner" border-color="#F8F8F8" :key="tabIndex">
				<u-tr>
					<u-th width="150rpx">序号</u-th>
					<u-th width="400rpx">年龄</u-th>
					<u-th>人数统计</u-th>
				</u-tr>
				<view class="table-cell" v-for="(item, index) of statisticsList" :key="index" @click="navTo(item)">
					<u-tr>
						<u-td width="150rpx">{{ index + 1 }}</u-td>
						<u-td width="400rpx">{{ item.NAME }}</u-td>
						<u-td>{{ item.VALUE }}</u-td>
					</u-tr>
				</view>
			</u-table>

			<view class="com-h2"><text class="h2-title">图表展示</text></view>

			<view class="canvas-box">
				<!-- 饼状图 -->
				<uni-charts type="pie" canvasId="chartData" :chartData="chartData" :reshow="tabIndex == 3"></uni-charts>
			</view>
		</view>

		<view class="table-box" v-if="tabIndex == 4">
			<view class="com-h2"><text class="h2-title">数量统计</text></view>

			<u-table class="table-inner" border-color="#F8F8F8" :key="tabIndex">
				<u-tr>
					<u-th width="150rpx">序号</u-th>
					<u-th width="400rpx">学历</u-th>
					<u-th>人数统计</u-th>
				</u-tr>
				<view class="table-cell" v-for="(item, index) of statisticsList" :key="index" @click="navTo(item)">
					<u-tr>
						<u-td width="150rpx">{{ index + 1 }}</u-td>
						<u-td width="400rpx">{{ item.NAME }}</u-td>
						<u-td>{{ item.VALUE }}</u-td>
					</u-tr>
				</view>
			</u-table>

			<view class="com-h2"><text class="h2-title">图表展示</text></view>

			<view class="canvas-box">
				<!-- 饼状图 -->
				<uni-charts type="pie" canvasId="chartData" :chartData="chartData" :reshow="tabIndex == 4"></uni-charts>
			</view>
		</view>

		<view class="table-box" v-if="tabIndex == 5">
			<view class="com-h2"><text class="h2-title">数量统计</text></view>

			<u-table class="table-inner" border-color="#F8F8F8" :key="tabIndex">
				<u-tr>
					<u-th width="150rpx">序号</u-th>
					<u-th width="400rpx">党派</u-th>
					<u-th>人数统计</u-th>
				</u-tr>
				<view class="table-cell" v-for="(item, index) of statisticsList" :key="index" @click="navTo(item)">
					<u-tr>
						<u-td width="150rpx">{{ index + 1 }}</u-td>
						<u-td width="400rpx">{{ item.NAME }}</u-td>
						<u-td>{{ item.VALUE }}</u-td>
					</u-tr>
				</view>
			</u-table>

			<view class="com-h2"><text class="h2-title">图表展示</text></view>

			<view class="canvas-box">
				<!-- 饼状图 -->
				<uni-charts type="pie" canvasId="chartData" :chartData="chartData" :reshow="tabIndex == 5"></uni-charts>
			</view>
		</view>

		<view class="table-box" v-if="tabIndex == 6">
			<view class="com-h2"><text class="h2-title">数量统计</text></view>

			<u-table class="table-inner" border-color="#F8F8F8" :key="tabIndex">
				<u-tr>
					<u-th width="150rpx">序号</u-th>
					<u-th width="400rpx">代表团</u-th>
					<u-th>人数统计</u-th>
				</u-tr>
				<view class="table-cell" v-for="(item, index) of statisticsList" :key="index" @click="navTo(item)">
					<u-tr>
						<u-td width="150rpx">{{ index + 1 }}</u-td>
						<u-td width="400rpx">{{ item.NAME }}</u-td>
						<u-td>{{ item.VALUE }}</u-td>
					</u-tr>
				</view>
			</u-table>

			<view class="com-h2"><text class="h2-title">图表展示</text></view>

			<view class="canvas-box">
				<!-- 饼状图 -->
				<uni-charts type="pie" canvasId="chartData" :chartData="chartData" :reshow="tabIndex == 6"></uni-charts>
			</view>
		</view>

		<view class="table-box" v-if="tabIndex == 7">
			<view class="com-h2"><text class="h2-title">数量统计</text></view>

			<u-table class="table-inner" border-color="#F8F8F8" :key="tabIndex">
				<u-tr>
					<u-th width="150rpx">序号</u-th>
					<u-th width="400rpx">地域活动组</u-th>
					<u-th>人数统计</u-th>
				</u-tr>
				<view class="table-cell" v-for="(item, index) of statisticsList" :key="index" @click="navTo(item)">
					<u-tr>
						<u-td width="150rpx">{{ index + 1 }}</u-td>
						<u-td width="400rpx">{{ item.NAME }}</u-td>
						<u-td>{{ item.VALUE }}</u-td>
					</u-tr>
				</view>
			</u-table>

			<view class="com-h2"><text class="h2-title">图表展示</text></view>

			<view class="canvas-box">
				<!-- 饼状图 -->
				<uni-charts type="pie" canvasId="chartData" :chartData="chartData" :reshow="tabIndex == 7"></uni-charts>
			</view>
		</view>

		<view class="table-box" v-if="tabIndex == 8">
			<view class="com-h2"><text class="h2-title">数量统计</text></view>

			<u-table class="table-inner" border-color="#F8F8F8" :key="tabIndex">
				<u-tr>
					<u-th width="150rpx">序号</u-th>
					<u-th width="400rpx">界别</u-th>
					<u-th>人数统计</u-th>
				</u-tr>
				<view class="table-cell" v-for="(item, index) of statisticsList" :key="index" @click="navTo(item)">
					<u-tr>
						<u-td width="150rpx">{{ index + 1 }}</u-td>
						<u-td width="400rpx">{{ item.NAME }}</u-td>
						<u-td>{{ item.VALUE }}</u-td>
					</u-tr>
				</view>
			</u-table>

			<view class="com-h2"><text class="h2-title">图表展示</text></view>

			<view class="canvas-box">
				<!-- 饼状图 -->
				<uni-charts type="pie" canvasId="chartData" :chartData="chartData" :reshow="tabIndex == 8"></uni-charts>
			</view>
		</view>

		<view class="table-box" v-if="tabIndex == 9">
			<view class="com-h2"><text class="h2-title">数量统计</text></view>

			<u-table class="table-inner" border-color="#F8F8F8" :key="tabIndex">
				<u-tr>
					<u-th width="150rpx">序号</u-th>
					<u-th width="400rpx">专委会</u-th>
					<u-th>人数统计</u-th>
				</u-tr>
				<view class="table-cell" v-for="(item, index) of statisticsList" :key="index" @click="navTo(item)">
					<u-tr>
						<u-td width="150rpx">{{ index + 1 }}</u-td>
						<u-td width="400rpx">{{ item.NAME }}</u-td>
						<u-td>{{ item.VALUE }}</u-td>
					</u-tr>
				</view>
			</u-table>

			<view class="com-h2"><text class="h2-title">图表展示</text></view>

			<view class="canvas-box">
				<!-- 饼状图 -->
				<uni-charts type="pie" canvasId="chartData" :chartData="chartData" :reshow="tabIndex == 9"></uni-charts>
			</view>
		</view>

		<u-back-top :scroll-top="scrollTop" top="200"></u-back-top>
	</view>
</template>

<script>
import uniCharts from '@/components/uni-charts/uni-charts.vue';
import dateTimePicker from '@/components/uni-datetime-picker';
import { mapState } from 'vuex';
export default {
	components: {
		uniCharts,
		dateTimePicker
	},
	data() {
		return {
			scrollTop: 0,
			key: 0,
			show: false,
			tabIndex: 1,

			jieci: '',
			jcShow: false,
			jcList: [],
			statisticsList: [],
			chartData: {
				series: [
					{
						data: []
					}
				]
			},

			statistics: {
				jieId: '',
				ciId: ''
			},
			loading: 'loadmore'
		};
	},
	onLoad() {
		this.loadLogin();
		this.loadData();
		// this.jieciData();
	},
	onPageScroll(res) {
		this.scrollTop = res.scrollTop;
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.Authorization) {
				this.clientCode = this.userInfo.sysUser.clientCode;
				this.userId = this.userInfo.sysUser.id;
				this.statistics.jieId = this.userInfo.jieCi.pid;
				this.statistics.ciId = this.userInfo.jieCi.id;
			} else {
				this.$logout();
			}
		},
		loadData() {
			let url = '/system/user-info/total_weiyuan';
			let data = {
				userId: this.userId,
				clientCode: this.clientCode,
				...this.statistics
			};
			switch (this.tabIndex) {
				case 1:
					data.sex = 'sex';
					break;
				case 2:
					data.nation = 'nation';
					break;
				case 3:
					data.birthday = 'birthday';
					break;
				case 4:
					data.xueli = 'xueli';
					break;
				case 5:
					data.dangpai = 'dangpai';
					break;
				case 6:
					data.wyhdz = 'wyhdz';
					break;
				case 7:
					data.remark4 = 'remark4';
					break;
				case 8:
					data.jiebie = 'jiebie';
					break;
				case 9:
					data.depId = 'depId';
					break;
				default:
					data.wyhdz = 'wyhdz';
			}
			this.$request(url, data, {
				load: true
			}).then((res) => {
				if (!res.data) {
					return false;
				}
				let arr = [];
				this.statisticsList = res.data;
				res.data.forEach((item, index) => {
					arr.push({
						name: item.NAME,
						value: parseInt(item.VALUE)
					});
				});
				this.chartData.series[0].data = arr;
				this.key--;
			});
		},
		tab(e) {
			this.tabIndex = e;
			this.loadData();
		},
		yearChange({ date }) {
			this.statistics.year = date.year.toString();
		},
		jcConfirm(e) {
			this.jieci = e[0].label + e[1].label;
			this.statistics.jieId = e[0].value;
			this.statistics.ciId = e[1].value;
		},
		filter() {
			this.show = false;
			this.statisticsList = [];
			this.loadData();
		},
		resert() {
			this.show = false;
			this.jieci = '';
			this.statistics.jieId = '';
			this.statistics.ciId = '';
			this.statistics.year = '';
			this.statisticsList = [];
			this.loadData();
		},
		jieciData() {
			let data = {
				clientCode: this.clientCode,
				jieCi: {
					pid: ''
				}
			};
			this.$request('/jie-ci/list', data).then((res) => {
				this.jcList = [];
				let jieArr = [];
				let ciArr = [];
				res.data.forEach((item) => {
					data.jieCi.pid = item.id;
					this.$request('/jie-ci/list', data).then((res) => {
						ciArr = [];
						res.data.forEach((key) => {
							ciArr.push({
								value: key.id,
								label: key.name
							});
						});
						this.jcList.push({
							value: item.id,
							label: item.name,
							children: ciArr
						});
					});
				});
			});
		},
		navTo(e) {
			console.log(e);
		},
		detailTo(item) {
			uni.navigateTo({
				url: '/pagesB/will/detail?id=' + item.id
			});
		}
	}
};
</script>

<style lang="scss">
.tab-nav {
	flex-wrap: wrap;
	margin-bottom: -20rpx;
	padding: 10rpx 20rpx;
	border: 0;
	background-color: #fff;

	.tab-item {
		flex-shrink: 0;
		margin: 10rpx;
		padding: 0 20rpx;
		line-height: 60rpx;
		height: 60rpx;
		color: #666;
		text-align: center;
		border-radius: 6rpx;
		background-color: #e6e7e8;
	}

	.tab-item.active {
		font-weight: bold;
		color: #fff;
		background-color: #e5231a;
	}
}

.canvas-box {
	position: relative;
	padding: 20rpx;
	width: 100%;
	height: 500rpx;
	overflow: hidden;
	background-color: #fff;
}

#chartData {
	display: block;
	width: 100%;
	height: 500rpx;
}

.form-box {
	.form-item {
		@include mp-flex;
		border-bottom: 20rpx solid $u-border-color;
	}
}

.fiexd-btm {
	position: static;
	padding: 30rpx;
}
</style>
